<template>
  <el-dialog
    title="工单信息详情"
     width="900px"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-steps :active="dataForm.status+1" finish-status="success" align-center style="margin-bottom:20px">
      <el-step title="发起" ></el-step>
      <el-step title="进行中" ></el-step>
      <el-step title="完成" ></el-step>
    </el-steps>
    <el-form :model="dataForm" inline="" ref="dataForm" label-width="100px" disabled="">
      <el-card class="box-card" style="margin-bottom:10px">
        <el-form-item label="工单编号：" prop="content" style="width:250px">
            {{dataForm.businessNum}}
        </el-form-item>
         <el-form-item label="负责人：" prop="handlerName" style="width:250px">
            {{dataForm.handlerName}}
        </el-form-item>
        <el-form-item label="指派时间：" prop="createTime" style="width:250px">
            {{dataForm.createTime}}
        </el-form-item><br>
        <el-form-item label="工单类型：" prop="typeDesc" style="width:250px">
           <el-tag :type="dataForm.type == 0 ? 'info':'warning'"> {{dataForm.typeDesc}}</el-tag>
        </el-form-item>
        <el-form-item label="设备：" prop="equipmentName" style="width:250px">
            {{dataForm.equipmentName +'('+(dataForm.rtuFarmlandName||'')+')'}}
        </el-form-item>
         <el-form-item label="紧急度：" prop="gradeNumName" style="width:250px">
           {{dataForm.gradeNumName}}
        </el-form-item><br>
        <el-form-item label="工单内容：" prop="content">
            {{dataForm.content}}
        </el-form-item>
      </el-card>
      <!-- 接收信息 -->
      <div v-if="dataForm.status=='1' || dataForm.status=='2'">
         <el-card class="box-card" style="margin-bottom:10px">
          <el-form-item label="接收时间：" prop="gradeNum">
             {{dataForm.receiveTime}}
          </el-form-item>
         </el-card>
      </div>
      <!-- 结果信息 -->
      <div v-if="dataForm.status=='2'">
         <el-card class="box-card" >
          <el-form-item label="反馈时间：" prop="finishTime" style="width:250px">
            {{dataForm.receiveTime}}
          </el-form-item>
          <el-form-item label="结果状态：" prop="resultStatusDesc">
              <el-tag v-if="dataForm.resultStatus==0" type="success"> {{dataForm.resultStatusDesc}}</el-tag>
              <el-tag v-if="dataForm.resultStatus==1" type="warning"> {{dataForm.resultStatusDesc}}</el-tag>
              <el-tag v-if="dataForm.resultStatus==2" type="danger"> {{dataForm.resultStatusDesc}}</el-tag>
          </el-form-item><br>
          <el-form-item label="处理结果：" prop="resultContent">
             {{dataForm.resultContent}}
          </el-form-item><br>
          <el-form-item label="附件：" prop="resultFileIds">
            <img v-for="(item, index) in resultFileIdsArr" :key="index" :src="loadImage(item)" 
                @click="downloadFile(item)" height="100px" style="max-width:100%;overflow:hidden;margin-right:10px;margin-bottom:10px">
            <iframe v-show="false" :src="ifrUrl"></iframe>
          </el-form-item>
         </el-card>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
   
    data () {
      return {
        visible: false,
        loading: false,
        dataForm: {
          id: 0,
          handler: '',
          equipmentId: '',
          resultStatus: 0,
          type: 0,
          content: '',
          gradeNum: '',
          status: 0,
          resultContent: '',
          resultFileIds: '',
          sourceType: '',
        },
        equipmentListLoading: false,
        equipmentList:[],// 处理人列表
        equipmentParams:{},// 处理人查询参数
        handlerListLoading: false,
        handlerList:[],// 处理人列表
        hadlerParams:{},// 处理人查询参数
       
        options: [],
        ifrUrl:'',
        resultFileIdsArr:[]
      }
    },
    methods: {
      init (id) {
        this.equipmentListLoadMore("init")
        this.handlerListLoadMore("init")

        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          // this.dataForm.status = 0
          // this.$refs['dataForm'].resetFields()
          this.$http({
            url: this.$http.adornUrl(`/buss/bussmaintaintask/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              // this.dataForm.handler = data.bussMaintainTask.handler
              // this.dataForm.equipmentId = data.bussMaintainTask.equipmentId
              // this.dataForm.businessNum = data.bussMaintainTask.businessNum
              // this.dataForm.type = data.bussMaintainTask.type
              // this.dataForm.content = data.bussMaintainTask.content
              // this.dataForm.gradeNum = data.bussMaintainTask.gradeNum
              this.dataForm = data.bussMaintainTask
              this.resultFileIdsArr = []
              if(this.dataForm.resultFileIds){
                this.resultFileIdsArr = this.dataForm.resultFileIds.split(',')
              }
            }
          })
        })
      },
      // 这里下拉框查询触发的方法
      remoteMethod(query) {
        this.equipmentListLoadMore('query',query)
      },
      // 这里写入滚动加载要触发的方法
      equipmentListLoadMore (type,query) {
        this.equipmentListLoading = true

        if(type && (type == 'init' || type == 'query')){
            this.equipmentParams.page = 1
            this.equipmentList = []
        }else if(this.equipmentParams.page){
            if(this.equipmentParams.page>=this.equipmentParams.totalPage){
                this.equipmentListLoading = false
                return
            }
            this.equipmentParams.page += 1
        }

        var _this = this
        this.$http({
            url: this.$http.adornUrl('/buss/bussrtuequipment/list'),
            method: 'get',
            params: this.$http.adornParams({
                "name": query, //搜索参数
                "page": _this.equipmentParams.page || 1, //分页参数
                "limit": _this.equipmentParams.limit || 15, //每次查询15条记录
            })
        }).then(({data}) => {
            _this.equipmentListLoading = false
            _this.equipmentParams.totalPage = data.page.totalPage
            _this.equipmentList = _this.equipmentList.concat(data.page.list)
        })
      },
      // 这里下拉框查询触发的方法
      remoteMethod(query) {
        this.handlerListLoadMore('query',query)
      },
      // 这里写入滚动加载要触发的方法
      handlerListLoadMore (type,query) {
        this.handlerListLoading = true

        if(type && (type == 'init' || type == 'query')){
            this.hadlerParams.page = 1
            this.handlerList = []
        }else if(this.hadlerParams.page){
            if(this.hadlerParams.page>=this.hadlerParams.totalPage){
                this.handlerListLoading = false
                return
            }
            this.hadlerParams.page += 1
        }

        var _this = this
        this.$http({
            url: this.$http.adornUrl('/sys/user/list2'),
            method: 'get',
            params: this.$http.adornParams({
                "name": query, //搜索参数
                "page": _this.hadlerParams.page || 1, //分页参数
                "limit": _this.hadlerParams.limit || 15, //每次查询15条记录
            })
        }).then(({data}) => {
            _this.handlerListLoading = false
            _this.hadlerParams.totalPage = data.page.totalPage
            _this.handlerList = _this.handlerList.concat(data.page.list)
        })
      },
      loadImage(bytearrayId){
          return this.$http.adornUrl('/fileAction/loadFile?bytearrayId='+bytearrayId+'&token='+ this.$cookie.get('token'))
      },
      downloadFile(bytearrayId){
        this.ifrUrl =''
         if(bytearrayId != "" || bytearrayId != null){
            this.$nextTick(() => {
              this.ifrUrl= this.$http.adornUrl('/fileAction/downloadFile?bytearrayId='+bytearrayId+'&token='+ this.$cookie.get('token'))
            })
         }
      },
    }
  }
</script>
